<template>
    <div class="title-box">
        <div class="title">
            <div class="title-title" :title="title">{{title}}</div>
        </div>
        <div class="title-box-main">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TitleBox",
        props: {
            title: {
                type: String,
                default: '这是标题'
            }
        },
        data: function () {
            return {
                showInput: false,
            }
        },

    }
</script>

<style scoped>
    .title-box {
        height: calc(100% - 23px);
        border: 1px solid #cecece;
        border-radius: 10px;
        margin: 10px;
        overflow: hidden;
    }

    .title {
        height: 40px;
        background-color: #e9ebec52;
        border-bottom: 1px solid #cecece;
        line-height: 40px;
        color: grey;
        padding-left: 20px;
    }

    .title-box-main {
        height: calc(100% - 42px);
        overflow: auto;
    }

    .title-title {
        float: left;
        height: 100%;
        overflow: hidden;
    }
</style>